<template>
    <div class="map-container">
        <!-- 地图容器 -->
        <div id="container" class="map" ref="mapContainer">
            <!-- 苹果风格定位按钮 -->
            <el-button class="location-button-topleft" @click="handleLocate" type="primary" circle>
                <el-icon><Location /></el-icon>
            </el-button>
        </div>

        <!-- 商品列表 -->
        <div class="product-list" :class="{ 'product-list-expanded': productListVisible }">
            <!-- 展开/收起按钮 -->
            <el-button class="expand-button" @click="toggleProductList">
                <el-icon>
                    <component :is="productListVisible ? 'ArrowRight' : 'ArrowLeft'" />
                </el-icon>
            </el-button>
            
            <!-- 商品列表内容 -->
            <div class="product-content">
                <div class="list-header">
                    <h3>附近商品推荐</h3>
                </div>
                <el-scrollbar>
                    <div class="product-items">
                        <div
                            v-for="product in nearbyProducts"
                            :key="product.id"
                            class="product-card"
                            @click="handleProductClick(product)"
                        >
                            <div class="product-card-inner">
                                <div class="product-image-container">
                                    <el-image :src="product.mainImageUrl && !product.mainImageUrl.startsWith('http') ? '/images/product/' + product.mainImageUrl : product.mainImageUrl || (product.image && !product.image.startsWith('http') ? '/images/product/' + product.image : product.image)" fit="cover" class="product-image" />
                                </div>
                                <div class="product-info">
                                    <div class="product-name">{{ product.name }}</div>
                                    <div class="product-seller-info">
                                        <div class="seller-details">
                                            <el-avatar :size="16" :src="product.seller?.avatar && !product.seller.avatar.startsWith('http') ? '/images/user/' + product.seller.avatar : product.seller?.avatar || avatarImg" />
                                        <span>{{ product.seller?.name || '未知用户' }}</span>
                                        </div>
                                    </div>
                                    <div class="distance-tag">
                                        <el-icon><Location /></el-icon> {{ product.distance?.toFixed(1) }}km
                                    </div>
                                    <div class="price">¥{{ product.price }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Search, ArrowRight, ArrowLeft, Location } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '../../stores/user'
import request from '@/utils/request' // 导入封装的请求工具
// 导入图片资源
import placeholderImg from '@/assets/placeholder.png'
import avatarImg from '@/assets/avatar.png'

// 定义 props
const props = defineProps({
  initialCenter: {
    type: Array as () => [number, number] | null,
    default: null
  }
})

declare global {
    interface Window {
        AMap: any & {
          Map: any;
          Marker: any;
          LngLat: any;
          Pixel: any;
          Geolocation: any;
        };
        onAMapLoadCallback?: () => void; // 设为可选类型
        _amapCallbacks?: Array<(error?: Error) => void>; // 设为可选类型
        _mapMarkers?: any[]; // 保持可选
        init_amap?: () => void;
        _amapLoadingStatus?: 'not_loaded' | 'loading' | 'loaded' | 'error';
    }
}

const router = useRouter()
const mapContainer = ref<HTMLElement | null>(null)
const map = ref<any>(null)
// markers ref 不再直接使用，由 markerManager 管理

// 定义商品类型 - 扩展以包含 mainImageUrl 和其他后端可能返回的字段
interface Product {
    id: number
    name: string
    price: number
    image: string // 作为备用图片或前端模拟数据使用
    mainImageUrl?: string // 后端返回的主要图片链接
    distance?: number // 改为可选，因为可能在获取后计算
    location: [number, number]
    description?: string
    seller?: {
        name: string
        avatar: string
    }
    // 可以根据后端实际返回的数据结构添加更多字段
    [key: string]: any; // 允许其他未知属性，以便与后端数据兼容
}

// 创建标记管理器函数
interface CustomMarker {
  id: string | number; // 标记的唯一ID，通常是商品ID
  marker: any // AMap.Marker类型实例
}

const createMarkerManager = () => {
  const activeMarkers = ref<CustomMarker[]>([]);
  
  return {
    addMarker(id: string | number, markerInstance: any) {
      activeMarkers.value.push({ id, marker: markerInstance });
    },
    getMarkerById(id: string | number) {
      return activeMarkers.value.find(m => m.id === id)?.marker;
    },
    getAllMarkers() {
      return activeMarkers.value.map(m => m.marker);
    },
    clearMarkers() {
      if (map.value && activeMarkers.value.length > 0) {
        map.value.remove(activeMarkers.value.map(m => m.marker));
      }
      activeMarkers.value = [];
    },
    updateMarker(markerId: string | number, data: any) {
      const target = activeMarkers.value.find(m => m.id === markerId);
      if (target && target.marker && target.marker.setExtData) {
        const currentData = target.marker.getExtData() || {};
        target.marker.setExtData({ ...currentData, ...data });
      }
    },
    highlightMarker(markerId: string | number) {
        activeMarkers.value.forEach(m => {
            const markerInstance = m.marker;
            if (!markerInstance) return;
            const markerContent = markerInstance.getContent();
            if (!markerContent || typeof markerContent === 'string') return; // 确保 markerContent 是 DOM 元素

                const markerCard = markerContent.querySelector('.marker-card');
                const markerArrow = markerContent.querySelector('.marker-arrow');
                
                if (markerCard && markerArrow) {
                if (m.id === markerId) {
                  markerCard.style.transition = 'all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)';
                  markerArrow.style.transition = 'all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)';
                  markerCard.style.transform = 'scale(1.12) translateY(-8px)';
                  markerCard.style.boxShadow = '0 16px 32px rgba(0,0,0,0.3), 0 0 12px rgba(0,0,0,0.15)';
                  markerCard.style.border = '1px solid rgba(255,255,255,0.8)';
                  markerArrow.style.borderTopColor = '#f7f7f7';
                  markerArrow.style.borderTopWidth = '12px';
                    markerInstance.setTop(true); // 置顶标记
                } else {
                    // 重置其他非高亮标记的样式
                    markerCard.style.transform = '';
                    markerCard.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
                    markerCard.style.border = 'none';
                    markerArrow.style.borderTopColor = 'white';
                    markerArrow.style.borderTopWidth = '10px';
          }
        }
      });
    },
    resetMarkerStyles() {
      activeMarkers.value.forEach(m => {
        const markerInstance = m.marker;
        if (markerInstance) {
          const markerContent = markerInstance.getContent();
          if (markerContent && typeof markerContent !== 'string') {
            const markerCard = markerContent.querySelector('.marker-card');
            const markerArrow = markerContent.querySelector('.marker-arrow');
            
            if (markerCard && markerArrow) {
              markerCard.style.transition = 'all 0.25s ease-out';
              markerArrow.style.transition = 'all 0.25s ease-out';
              markerCard.style.transform = '';
              markerCard.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
              markerCard.style.border = 'none';
              markerArrow.style.borderTopColor = 'white';
              markerArrow.style.borderTopWidth = '10px';
            }
          }
        }
      });
    }
  }
}

// 创建标记管理器实例
const markerManager = createMarkerManager();
const userStore = useUserStore();

// 状态
const productListVisible = ref(true);
const loading = ref(false);
const nearbyProducts = ref<Product[]>([]); // 使用 Product 接口

// 地图API加载逻辑 (复用或参考 Home.vue 中的实现)
const loadMapScript = () => {
  return new Promise<void>((resolve, reject) => {
    if (window.AMap) {
      resolve();
      return;
    }
    if (window._amapLoadingStatus === 'loading') {
      if (!window._amapCallbacks) {
        window._amapCallbacks = [];
      }
      window._amapCallbacks.push((error) => error ? reject(error) : resolve());
        return;
      }
    if (window._amapLoadingStatus === 'loaded') {
        resolve();
      return;
    }
    if (window._amapLoadingStatus === 'error') {
        reject(new Error('地图API先前加载失败'));
        return;
      }
      
    window._amapLoadingStatus = 'loading';
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = `https://webapi.amap.com/maps?v=2.0&key=b801e4ff3ab164d8ef56d85cd52ec0e0&plugin=AMap.Geolocation,AMap.Geocoder,AMap.ToolBar,AMap.Scale,AMap.AutoComplete,AMap.PlaceSearch&callback=onAMapLoadCallback`;
    
    window.onAMapLoadCallback = () => {
      window._amapLoadingStatus = 'loaded';
      console.log('地图API加载完成 (Map.vue)');
      const callbacks = window._amapCallbacks || [];
      callbacks.forEach(cb => cb());
      window._amapCallbacks = [];
      resolve();
      window.onAMapLoadCallback = undefined; // 使用赋值undefined代替delete
    };

    script.onerror = (event: Event | string) => {
      window._amapLoadingStatus = 'error';
      const error = new Error(typeof event === 'string' ? event : '高德地图脚本加载失败');
      console.error(error);
      const callbacks = window._amapCallbacks || [];
      callbacks.forEach(cb => cb(error));
      window._amapCallbacks = [];
      reject(error);
      window.onAMapLoadCallback = undefined; // 使用赋值undefined代替delete
    };

    document.head.appendChild(script);
  });
};

// 初始化地图
const initMap = async () => {
  try {
    await loadMapScript();
    if (!mapContainer.value) {
      console.warn('地图容器尚未渲染，等待 nextTick');
      await nextTick();
    }
    if (!mapContainer.value) {
      console.error('地图容器获取失败');
        return;
      }

    const centerPoint = props.initialCenter || [116.397428, 39.90923]; // 优先使用 prop 的 initialCenter
    
    map.value = new (window.AMap as any).Map(mapContainer.value, {
      zoom: 15,
      center: centerPoint, // 使用 centerPoint
      resizeEnable: true,
      viewMode: '2D',
    });

      map.value.on('complete', () => {
      console.log('地图实例加载完成 (Map.vue)');
      if (props.initialCenter) {
        fetchNearbyProducts(props.initialCenter); // 如果有初始中心点，直接获取商品
        } else {
        handleLocate(); // 否则，执行自动定位
      }
    });

    // 监听地图移动和缩放结束事件，重新获取附近商品
    map.value.on('moveend', fetchNearbyProductsOnMapEvent);
    map.value.on('zoomend', fetchNearbyProductsOnMapEvent);

      } catch (error) {
    console.error('地图初始化失败 (Map.vue):', error);
    ElMessage.error('地图加载失败，请刷新页面重试');
  }
};

// 地图事件触发的获取商品逻辑
const fetchNearbyProductsOnMapEvent = () => {
  if (map.value) {
    const center = map.value.getCenter();
    fetchNearbyProducts([center.lng, center.lat]);
  }
};

    
    // 获取附近商品数据
const fetchNearbyProducts = async (centerCoordinates?: [number, number]) => {
  loading.value = true;
  try {
    const LngLat = centerCoordinates || props.initialCenter || (map.value ? [map.value.getCenter().lng, map.value.getCenter().lat] : [116.397428, 39.90923]);
    
    const response = await request.get('/products/nearby', {
      params: {
        longitude: LngLat[0],
        latitude: LngLat[1],
        distance: 5, // 搜索半径，单位公里，可根据需求调整
        //可以加上分页参数 page, pageSize 如果后端支持
      }
    });

    if (response.code === 200 && response.data) {
      // 转换后端数据以匹配 Product 接口，特别是图片
      nearbyProducts.value = response.data.map((item: any) => ({
        ...item,
        image: item.mainImageUrl || item.image || placeholderImg, // 优先使用 mainImageUrl
        mainImageUrl: item.mainImageUrl, // 保留原始 mainImageUrl 供需要时使用
        seller: item.seller || { name: item.sellerName || '未知用户', avatar: item.sellerAvatar || avatarImg },
        distance: typeof item.distance === 'number' ? parseFloat(item.distance.toFixed(1)) : undefined,
        location: [item.longitude, item.latitude] as [number, number]
      }));
      addMarkersToMap(nearbyProducts.value);
    } else {
      ElMessage.error(response.message || '获取附近商品失败');
      nearbyProducts.value = []; // 清空列表或显示错误提示
    }
  } catch (error: any) {
    console.error('请求附近商品数据失败 (Map.vue):', error);
    ElMessage.error('网络错误，获取附近商品失败');
    nearbyProducts.value = []; // 清空列表
  } finally {
    loading.value = false;
  }
};

// 将商品标记添加到地图
const addMarkersToMap = (products: Product[]) => {
  markerManager.clearMarkers(); // 清除旧标记
  if (!map.value) return;

  // 初始化全局标记数组
  window._mapMarkers = window._mapMarkers || [];

  products.forEach(product => {
    if (product.location && product.location.length === 2) {
      // 创建标记 - 使用DOM元素作为标记内容
      const content = document.createElement('div');
      content.className = 'custom-marker-wrapper';
      
      // 设置内容 - 使用卡片式设计，添加指示箭头
      const markerHTML = `
        <div class="custom-marker" data-id="${product.id}" style="position:absolute;transform:translate(-50%, -100%);cursor:pointer;">
          <div class="marker-hitbox" style="position:absolute;top:-20px;left:-20px;right:-20px;bottom:-10px;"></div>
          <div class="marker-card" style="display:flex;align-items:center;background:white;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.15);padding:8px;min-width:160px;transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);">
        <div class="marker-avatar" style="width:40px;height:40px;border-radius:4px;overflow:hidden;flex-shrink:0;margin-right:10px;">
              <img src="${product.mainImageUrl && !product.mainImageUrl.startsWith('http') ? '/images/product/' + product.mainImageUrl : product.mainImageUrl || (product.image && !product.image.startsWith('http') ? '/images/product/' + product.image : product.image)}" alt="${product.name}" style="width:100%;height:100%;object-fit:cover;">
        </div>
        <div class="marker-info" style="flex:1;">
              <div class="marker-name" style="font-size:14px;color:#333;font-weight:500;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                ${product.name}
              </div>
          <div class="marker-price" style="font-size:16px;font-weight:bold;color:#ff4d4f;">¥${product.price}</div>
        </div>
      </div>
          <div class="marker-arrow" style="position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid white;transition:border 0.3s ease;"></div>
    </div>
      `;
        
      content.innerHTML = markerHTML;
  
  // 获取标记元素的引用
  const markerElement = content.querySelector('.marker-card') as HTMLElement;
  const arrowElement = content.querySelector('.marker-arrow') as HTMLElement;
      const customMarker = content.querySelector('.custom-marker') as HTMLElement;
      const hitbox = content.querySelector('.marker-hitbox') as HTMLElement;
      
      // 创建标记并直接添加到地图
      const marker = new (window.AMap as any).Marker({
          position: product.location,
        content: content,
        anchor: 'bottom-center',
        offset: new (window.AMap as any).Pixel(0, 0),
        zIndex: 100,
        extData: product
      });
  
  // 标记悬停状态管理
  let isHovered = false;
      let hoverLockTimer: NodeJS.Timeout | null = null;
      
      // 鼠标进入处理
      content.addEventListener('mouseenter', (e: MouseEvent) => {
        // 清除之前的定时器
        if (hoverLockTimer) {
          clearTimeout(hoverLockTimer);
          hoverLockTimer = null;
        }
        
    // 避免重复触发动画
    if (isHovered) return;
    
    // 设置状态
    isHovered = true;
    
    try {
          // 应用悬停样式
      markerElement.style.transition = 'all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)';
      markerElement.style.transform = 'scale(1.1) translateY(-8px)';
      markerElement.style.boxShadow = '0 16px 32px rgba(0,0,0,0.3), 0 0 12px rgba(0,0,0,0.15)';
      markerElement.style.border = '1px solid rgba(255,255,255,0.8)';
      arrowElement.style.transition = 'all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)';
      arrowElement.style.borderTopColor = '#f7f7f7';
          
          // 置顶标记
          if (map.value) {
            try {
              map.value.remove(marker);
              map.value.add(marker);
            } catch (e) {
              console.error('标记置顶失败', e);
            }
          }
    } catch (e) {
      console.error('悬停效果应用失败:', e);
      isHovered = false;
    }
  });
  
      // 鼠标离开处理
      content.addEventListener('mouseleave', (e: MouseEvent) => {
    // 确保是真正的离开事件，不是移入子元素
    if (e.relatedTarget && content.contains(e.relatedTarget as Node)) {
      return;
    }
    
    // 如果当前没有悬停，直接返回
    if (!isHovered) return;
    
    // 立即设置状态以提高响应速度
    isHovered = false;
    
    try {
      // 立即恢复默认样式
      markerElement.style.transition = 'all 0.25s ease-out';
      markerElement.style.transform = '';
      markerElement.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
      markerElement.style.border = 'none';
      arrowElement.style.transition = 'all 0.25s ease-out';
      arrowElement.style.borderTopColor = 'white';
    } catch (e) {
      console.error('恢复样式失败:', e);
    }
  });
  
      // 点击事件
      content.onclick = () => {
        handleProductClick(product);
      };

      markerManager.addMarker(product.id, marker);
        map.value.add(marker);
      
      // 确保_mapMarkers存在
      if (window._mapMarkers) {
        window._mapMarkers.push(marker);
      }
    }
  });
};

// 定位到当前位置
const handleLocate = () => {
  if (!map.value) {
    ElMessage.warning('地图尚未初始化完成');
      return;
    }
  // 如果提供了 initialCenter prop，则不再执行自动定位逻辑，因为地图已基于此初始化
  if (props.initialCenter) {
    console.log('使用提供的 initialCenter，跳过自动定位。');
    fetchNearbyProducts(props.initialCenter);
      return;
    }
    
  const geolocation = new (window.AMap as any).Geolocation({
    enableHighAccuracy: true,
    timeout: 10000,
    buttonPosition: 'RT',
    buttonOffset: new (window.AMap as any).Pixel(10, 20),
    zoomToAccuracy: true,
  });
  map.value.addControl(geolocation);
  geolocation.getCurrentPosition((status: string, result: any) => {
    if (status === 'complete') {
      const currentPosition: [number, number] = [result.position.lng, result.position.lat];
      map.value.setCenter(currentPosition);
      fetchNearbyProducts(currentPosition); // 定位成功后获取附近商品
    } else {
      ElMessage.error('定位失败: ' + result.message);
      fetchNearbyProducts(); // 定位失败也尝试用默认中心点获取商品
  }
  });
};

// 切换商品列表可见性
const toggleProductList = () => {
  productListVisible.value = !productListVisible.value;
  // 可选: 列表状态改变后，延迟调整地图尺寸以适应新布局
  nextTick(() => {
    if(map.value && map.value.resize) {
        map.value.resize();
    }
  });
};

// 点击商品卡片或标记
const handleProductClick = (product: Product) => {
  // 高亮地图上的标记
  markerManager.highlightMarker(product.id);
  // 平滑移动地图到标记位置（如果标记不在视野内）
  if (map.value && product.location) {
      const markerPosition = new (window.AMap as any).LngLat(product.location[0], product.location[1]);
      // 检查标记是否在当前视野内，如果不在则移动
      // const bounds = map.value.getBounds();
      // if (!bounds.contains(markerPosition)) {
      //     map.value.panTo(markerPosition);
      // }
      // 简单处理：直接panTo，或先判断是否在视野内
       map.value.setCenter(markerPosition);
  }
  // router.push(`/product/${product.id}`); // 跳转到商品详情页
  console.log('Clicked product:', product.id);
  // 可以在这里决定是否立即跳转，或者只是高亮和居中标记
};


// 监听 nearbyProducts 的变化，如果直接修改了它，需要重新渲染标记
// watch(nearbyProducts, (newProducts) => {
//   addMarkersToMap(newProducts);
// }, { deep: true });


onMounted(() => {
    initMap();
});

onUnmounted(() => {
    if (map.value) {
    map.value.destroy();
    map.value = null;
    }
  markerManager.clearMarkers();
  // 清理全局回调和状态
  window.onAMapLoadCallback = undefined; // 使用赋值undefined代替delete
  // 不重置_amapLoadingStatus
});

</script>

<style scoped>
.map-container {
    display: flex;
    height: calc(100vh - 60px); /* 减去顶部导航栏高度，如果存在 */
    width: 100%;
    position: relative; /* 为定位按钮和列表提供上下文 */
}

.map {
    flex-grow: 1;
    height: 100%;
}

.location-button-topleft {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1001; /* 比地图控件高 */
    background-color: rgba(255, 255, 255, 0.9) !important; /* 使用!important覆盖el-button默认样式 */
    color: #333 !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}
.location-button-topleft:hover {
    background-color: rgba(255, 255, 255, 1) !important;
    border-color: rgba(0,0,0,0.15) !important;
}

.product-list {
    width: 350px;
    height: 100%;
    background-color: #fff;
    box-shadow: -2px 0 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
    z-index: 1000;
    overflow: hidden; /* 防止内容溢出动画 */
}

.product-list-expanded {
    width: 350px;
}

.product-list:not(.product-list-expanded) {
    width: 0; /* 收起时宽度为0 */
    padding: 0;
}

.expand-button {
    position: absolute;
    left: -0px; /* 按钮在列表左边缘 */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1002;
    padding: 10px 6px;
    border-radius: 0 4px 4px 0 !important; 
    background-color: #fff !important;
    border: 1px solid #dcdfe6 !important;
    border-left: none !important;
    box-shadow: 2px 0px 5px rgba(0,0,0,0.1);
}

.product-list:not(.product-list-expanded) .expand-button {
    left: 0px;
}

.product-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 确保滚动条在内容区内 */
     min-width: 330px; /* 确保收起动画时内容不会立即消失 */
}

.list-header {
    padding: 15px;
    border-bottom: 1px solid #e8e8e8;
}

.list-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.el-scrollbar {
    flex-grow: 1;
}

.product-items {
    padding: 10px;
}

.product-card {
    display: flex;
    margin-bottom: 12px;
    border-radius: 8px;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    overflow: hidden; /* 确保内部圆角 */
}

.product-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.product-card-inner {
    display: flex;
    padding: 10px;
    width: 100%;
}

.product-image-container {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    margin-right: 12px;
    flex-shrink: 0; /* 防止图片被压缩 */
}

.product-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 分散对齐，使价格在底部 */
    min-width: 0; /* 防止flex item溢出 */
}

.product-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.product-seller-info {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #777;
    margin-bottom: 4px;
}

.seller-details {
    display: flex;
    align-items: center;
}

.seller-details .el-avatar {
    margin-right: 6px;
}

.distance-tag {
    font-size: 12px;
    color: #777;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.distance-tag .el-icon {
    margin-right: 4px;
    font-size: 14px;
}

.price {
    font-size: 16px;
    font-weight: bold;
    color: #E53935; /* 醒目的价格颜色 */
    align-self: flex-start; /* 确保价格在左侧 */
}

/* 自定义地图标记样式 */
:deep(.custom-marker) {
  cursor: pointer;
  position: relative; /* 为箭头定位 */
}

:deep(.marker-card) {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 8px;
  min-width: 150px; /* 调整最小宽度 */
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

:deep(.marker-avatar) {
  width: 35px; /* 减小头像尺寸 */
  height: 35px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 8px;
}

:deep(.marker-avatar img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:deep(.marker-info) {
  flex: 1;
  min-width: 0; /* 防止文字溢出 */
}

:deep(.marker-name) {
  font-size: 13px; /* 减小字号 */
  color: #333;
  font-weight: 500;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px; /* 限制最大宽度 */
}

:deep(.marker-price) {
  font-size: 14px; /* 减小字号 */
  font-weight: bold;
  color: #E53935;
}

:deep(.marker-arrow) {
  position: absolute;
  bottom: -10px; /* 箭头在卡片下方 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
  transition: border-top-color 0.3s ease, border-top-width 0.3s ease;
}

</style> 